<template>
  <div class="dashboard-container">
    <el-card>
      <el-tabs>
        <!-- 放置页签 -->
        <!-- <template v-slot:before>
            <span slot="before">共{{counts}}条记录</span>
          </template> -->
        <el-form label-width="80px" :inline="true">

          <el-col :span="4">
            <el-form-item>
              <el-input v-model="input" placeholder="根据用户名搜索" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button size="small" @click="input=''">清除</el-button>
              <el-button :loading="isLoading" type="primary" size="small" @click="search">
                搜索
              </el-button>
            </el-form-item>
          </el-col>

        </el-form>
        <el-row type="flex" justify="end" align="middle" style="height: 60px;">
          <el-button
            icon="el-icon-edit"
            size="small"
            type="success"
            @click="assignPerm"
          >
            新增权限组
          </el-button>
        </el-row>
        <el-alert
          :title="`共${counts}条数据`"
          type="info"
          :closable="false"
          show-icon
        />
        <!-- 给表格绑定数据 -->
        <el-table border :data="list" :header-cell-style="{background:'#fafafa'}">
          <el-table-column
            align="center"
            type="selection"
            label="序号"
            width="300"
          />
          <el-table-column
            align="center"
            prop="title"
            label="用户名"
            width="200"
          />
          <el-table-column
            align="center"
            prop="create_date"
            label="日期"
            width="500"
          >
            <template v-slot="{ row }">
              <!-- 将时间进行格式化 -->
              {{ row.create_date | formatDate }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button
                size="small"
                type="primary"
                plain
                circle
                @click="editUser(row)"
              >
                <i class="el-icon-edit" />
              </el-button>
              <el-button
                size="small"
                type="danger"
                plain
                circle
                @click="deleteUser(row.id)"
              >
                <i class="el-icon-delete" />
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px;">
          <!-- 分页组件 -->
          <!-- 4个属性 2个事件 -->
          <!-- 属性1：total总数 -->
          <!-- 属性2：page-size 每页条数 -->
          <!-- 属性3：current-page 当前页数 -->
          <!-- 属性4：page-sizes 每页可以有哪些条数 -->
          <!-- 事件1：current-change 页码修改事件 -->
          <!-- 事件2：size-change 每页数量修改事件 -->

          <div class="block">
            <el-pagination
              background
              :current-page="page.page"
              :page-sizes="[2, 4, 6, 8, 10]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="counts"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-row>

      </el-tabs>
    </el-card>

    <!-- 新增权限弹框 -->
    <el-dialog title="创建权限组" :visible.sync="showDialog" @close="btnCancel">
      <el-form
        ref="addUser"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="title">
          <el-input v-model.trim="formData.title" style="width: 50%;" />
        </el-form-item>
        <el-form-item label="权限名称 " prop="title">
          <el-tree
            ref="permTree"
            :data="permData"
            :props="defaultProps"
            :show-checkbox="true"
            :check-strictly="false"
            :default-expand-all="false"
            :default-checked-keys="defaultCheck"
            node-key="id"
          />
        </el-form-item>
      </el-form>

      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { permissionList, addPermission, delPermission, detailPermission, editPermission } from '@/api/permission'
import { menusList } from '@/api/menus'
// import addPermission from './components/add-permission.vue'
// import {tranListToTreeData} from '@/utils/index'
export default {
  name: 'Goupi',
  components: {
    // addPermission
  },
  props: {},
  data() {
    return {
      input: '',
      currentrow: {},
      defaultCheck: [],
      isStrictly: false, // 不是严格模式父子关联
      permData: [], // 接受权限数组
      defaultProps: {
        label: 'title',
        children: 'childs'
      },

      isLoading: false,
      showDialog: false,
      list: [],
      page: 1, // 当前页码
      // pages:6,
      counts: 0, // 总数
      pagesize: 2,
      // isStricTly:false, //不是严格模式父子关联
      formData: {
        title: '',
        permissions: [],
        id: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '用户姓名不能为空',
            trigger: 'blur'
          }, { min: 2, max: 8, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }
  },
  watch: {},
  created() {
    this.permissionList()
    this.menusList()
  },
  mounted() {},
  methods: {
    async permissionList() {
      const { data } = await permissionList({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(data);
      this.list = data.list
      console.log(this.list)
      this.counts = data.counts
    },
    // 新增权限数组
    async assignPerm() {
      // 获取权限点数据
      // const { data } = await permissionList()
      const { data } = await menusList()
      console.log(data)
      this.permData = data

      // console.log(data.list)
      // this.permData = data.list
      this.showDialog = true
    },
    // getCheckedData(checkedKeys,selectedObj){
    // console.log(selectedObj.checkedKeys);
    // this.formData.permissions=selectedObj.checkedkeys
    // console.log(this.formData.permissions);
    // console.log(selectedObj.checkedkeys);
    // console.log(selectedObj.checkedkeys);
    // },
    // 菜单权限
    async  menusList() {
      const { data } = await menusList()
      console.log(data)
      this.permData = data
    },
    // 修改权限
    async editUser(row) {
      const { data } = await detailPermission(row.id)
      console.log(data)
      this.formData = data
      this.defaultCheck = data.permissions
      this.currentrow = row

      this.showDialog = true
    //  this.$message.success('修改权限成功')
    },
    // 删除权限
    async deleteUser(id) {
      await this.$confirm('您确定删除嘛?')
      //  删除这行id
      await delPermission(id)
      if (this.list.length === 1 & (this.page !== 1)) {
        this.page--
      }
      // 拉取数据
      this.permissionList()
      this.$message.success('删除成功')
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.permissionList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.permissionList()
    },
    async btnOK() {
      //  校验表单
      await this.$refs.addUser.validate()
      // 判断formdata有没有id 有就是修改  没有就是新增
      if (this.formData.id) {
        console.log('修改')
        await editPermission(this.formData)
      } else {
        // 新增业务
        console.log('新增')
        this.formData.permissions = this.$refs.permTree.getCheckedKeys()
        await addPermission(this.formData)
      }

      // this.formData.permissions =  this.$refs.permTree.getCheckedKeys()
      console.log(this.formData)
      // await addPermission(this.formData)
      // 重新拉取数据
      this.permissionList()
      this.$message.success('操作成功')
      this.showDialog = false
    },
    btnCancel() {
      // 清空数据
      this.formData = {
        title: '',
        permissions: []
      }
      // 重置表单
      this.$refs.addUser.resetFields()
      this.showDialog = false
    },
    async search() {
      // 获取到列表数据
      const { data } = await permissionList({
        page: this.page,
        pagesize: this.pagesize,
        title: this.input

      })
      this.list = data.list
      this.counts = data.counts
    }
  }
}
</script>
<style scoped lang='scss'>
.dashboard-container {
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      margin-left: 20px;
      // .el-form-item__label {
      //   width: 230px !important;
      // }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}

</style>
